<template>
    <el-menu v-if="app_list.length > 0" :default-active="defaultActiveAppId" class="main-menu">
        <el-menu-item v-for="(item, index) in app_list" :index="item.id.toString()" :key="item.id" class="text-ellipsis"
            :class="{ 'is-locked': isLocked }" @click="isLocked ? null : get_message_group(index)">
            <template #title>
                <i class="el-icon-menu"></i>
                <span>{{ item.name }}</span>
            </template>
        </el-menu-item>
    </el-menu>
</template>

<script>
import { del_group, edit_group, get_message } from "@/apis/message"
import { get_apps } from "@/apis/app";
import { get_groups } from "@/apis/group";

export default {
    name: "MessageList",
    data() {
        return {
            app_list: [], // 将空字符串改为空数组
            group_list: [],
            messages: [],
            dialogFormVisible: false,
            editFormVisible: false,
            form: {
                id: '',
                name: "",
                messages: []
            },
            isSubmitting: false, // 添加一个标志位来跟踪是否正在提交
            isLocked: false, // 添加一个标志位来跟踪是否锁定
            defaultActiveAppId: '1' // 默认激活的应用ID
        }
    },
    beforeMount() {
        this.get_applist()
    },
    methods: {
        async get_applist() {
            this.app_list = await get_apps()
            if (this.app_list.length > 0) {
                this.defaultActiveAppId = this.app_list[0].id.toString(); // 设置默认激活的应用ID
                localStorage.setItem('app_list', JSON.stringify(this.app_list)) // 转换为字符串存储
                this.get_message_group(0)
            }
            // console.log('66', this.app_list)
        },

        async get_message_group(index) {
            if (this.isSubmitting || this.isLocked) {
                this.$message({
                    type: 'warning',
                    message: '当前对话正在响应，请稍后再试'
                });
                return;
            }

            if (this.messages && this.messages.length > 0) {
                // 安全地访问 messages 的属性
            } else {
                console.log('messages 未定义或为空');
            }

            if (this.app_list.length === 0) {
                this.$message({
                    type: 'warning',
                    message: '应用列表为空，请稍后再试'
                });
                return;
            }

            // 确保索引在范围内
            if (index < 0 || index >= this.app_list.length) {
                this.$message({
                    type: 'warning',
                    message: '无效的应用索引'
                });
                return;
            }

            console.log(this.app_list[index]['message_groups'])
            const app_id = this.app_list[index]['id']
            localStorage.setItem('app_id', app_id)
            this.bus.$emit('message_groups', this.app_list[index]['message_groups'])
            this.bus.$emit('tags', this.app_list[index]['tags'])
            this.bus.$emit("toList", [])
        }
    },
    mounted() {
        if (!this.bus) {
            this.bus = new Vue(); // 初始化事件总线
        }
        this.bus.$on('lod', (status) => {
            this.isSubmitting = status;
        });
        this.bus.$on('lockLists', (status) => {
            this.isLocked = status;
        });
    }
}
</script>

<style scoped>
.main-menu {
    padding: 0;
    margin: 0;
    height: 100%;
    position: fixed;
    width: 220px;
    background-color: #f4f4f7;
    border-right: 1px solid #DFE2EA;
    padding: 16px;
    box-sizing: border-box;
}

.main-menu .el-menu-item,
.main-menu .el-submenu__title {
    height: 45px;
    line-height: 45px;
    margin-bottom: 10px;
}

.main-menu .el-menu-item:focus,
.main-menu .el-menu-item:hover {
    border-radius: 8px;
    background-color: #e8ebf0;
}

.main-menu .el-menu-item.is-active {
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.is-locked {
    pointer-events: none;
    opacity: 0.6;
}
</style>
